<template>
  <div>
    <!-- class和style绑定样式 -->
    <!-- <div :class="className">我是div</div> -->
    <!-- <div :class="[isClass?className:className2]">我是div</div> -->
    <!-- <div :style="styleName">我是style</div> -->
    <!-- computed 和 methods 的异同 -->
    <!-- methods 调用几次打印几次 -->
    <!-- <input type="text" v-model="btnFns"> -->
    <!-- {{btnFn()}}--{{btnFns}}
    {{btnFn()}}--{{btnFns}}
    {{btnFn()}}--{{btnFns}}
    {{btnFn()}}--{{btnFns}}-->
    <!-- 父子组件传参 -->
    <!-- <button @click="btnFn()">Button</button> -->
    <!-- <About :cui="cui"/> -->
    <!-- {{cui}} -->
    <!-- <buton @click="btn">Button</button> -->
    <!-- {{num}} -->
    <!-- <About v-on:autoClk="numHave"/> -->
    <!-- <input type="radio" v-model="ipt" value="男">
    <input type="radio" v-model="ipt" value="女">--{{ipt}}-->
    <!-- <input type="checkbox" v-model="arr" name="" id="" value="吃" />--{{ arr }}
    <input type="checkbox" v-model="arr" name="" id="" value="喝" />
    <input type="checkbox" v-model="arr" name="" id="" value="玩" />
    <input type="checkbox" v-model="arr" name="" id="" value="乐" />-->
    <!--  -->
    <!-- <About>
      <template v-slot:default="nums">
        {{nums}}
      y56y5664y
      </template>
    </About> -->
    <!-- <slot/> -->
    <!-- 自定义 -->
    <!-- <input type="text" v-focus v-model="ipt">--{{ipt}} -->
    <!-- 过滤器 -->
    <!-- {{ message | capitalize }} -->
    <!--ref  -->
    <!-- <div ref="d"></div> -->
    <!-- <button @click="btnClk">Button </button> -->
  </div>
</template>

<script>
import About from "./views/About";
export default {
  data() {
    return {
      ipt:'123',
      // ipt: "",
      arr: [],
      className: "cui",
      isClass: true,
      className2: "cyq",
      firstName: "cui",
      lastName: "yuqi",
      styleName: {
        color: "red",
        fontSize: "100px"
      },
      cui: "cui",
      message:'qwer',
      fullName:'cuiyuqi',
      obj:{
        cui:'cui',
        q:"adsd"
      }
    };
  },
  mixins:{
    data(){
      return {
        asd:'asda',
        
      }
    },
    methods:{
      fn(){
        console.log("asdas");
      }
    }

  },
    beforeCreate() {       
    //组件实例刚被创建，组件属性计算之前，如 data属性等      
    // console.log(this.msg); //拿不到                
    // console.log(this);             
    console.log("beforeCreate");       
  },             
  created() {                    
    //组件实例创建完成，属性已绑定，但 DOM 还未生成，是拿不到DOM元素的$el属性还不存在
    // console.log(this.msg); //可以拿到      
    console.log("created");            
  },  
  //挂载   
  beforeMount() {   
    //模板编译/挂载之前   
    // console.log(document.getElementById("p"));//还是拿不到DOM   
    console.log("beforeMount");  
  },   
  mounted() {  
    //模板编译/挂载之后（不保证组件已在 goaument中）   
    console.log(document.getElementById("p")); //可以操作DOM   
    console.log("mounted");   
  },  
  //更新   
  beforeUpdate() {   
    //组件更新之前 组件里的数据修改 后触发 <input v-model="msg"> 修改的虚拟DOM   
    console.log("beforeUpdate");  
  },   
  updated() {   
    //组件更新之后  修改完成之后调用真实DOM   
    console.log("updated");
  },  
 //销毁   
  beforeDestroy() {  //组件销毁前调用  子组件使用 父组件销毁子组件触发
    console.log("beforeDestroy");
  },  
  destroyed() {  //实例销毁完毕后调用  
    console.log("destroyed");
  },  
  methods: {
    btnFn() {
      console.log("method");
      return this.firstName + this.lastName;
    },
    numHave(a) {
      console.log(a);
    },
    btnClk() {
      console.log(this.$refs.d);
      
    }
  },
   watch: {
    obj: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        console.log(val);
        console.log(oldval);
      },
    },
  filters:{
    capitalize (value) {
      return value.toUpperCase()
    } 
  },
  directives:{
   
      focus:{
         inserted(el){
           el.focus()
         }
      }
    
  },
  computed: {
    btnFns() {
      console.log("computed");
      return this.lastName + this.firstName;
    }
  },
  components: {
    About
  }
};
</script>

<style scoped>
</style>